<template>
  <div>
    <img
      v-if="!isImageError"
      :src="src"
      @error="handleError"
      :alt="alt"
      style="object-fit:cover"
    />
    <Avatar v-else>
      <template #icon>
        <UserOutlined />
      </template>
    </Avatar>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, ref } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { UserOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: '头像',
    },
  });

  const isImageError = ref(false);

  const handleError = () => {
    isImageError.value = true;
  };
</script>

<style scoped>
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
</style>
